<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /* rest参数在形参上使用，和java中的可变参数几乎一样 */
        
        // 参数列表中有多个普通参数，普通参数和箭头参数都支持
        let fun1 = function(a,b,c,d = 30) {
            console.log(a,b,c,d)
        }
        let fun2 = (a,b,c,d=30) => {
            console.log(a,b,c,d)
        }
        fun1(1,2,3)
        fun2(1,2,3,4)

        // 使用"..."作为参数列表，称之为rest参数，普通函数和箭头函数中都支持
        let fun3 = function(...args) {
            console.log(args)
        }
        let fun4 = (...args) => {
            console.log(args)
        }
        fun3(1,2,3)
        fun4(1,2,3,4)

        // rest参数作为形参，只能在参数列表的最后位置
        let fun5 = (a,b,...args) => {}
        // let fun6 = (a,b,...args1,...args2) => {} // 这里直接报错，因为rest参数有两个



        /* rest参数在实参上使用叫作spread参数 */

        // spread参数使用在实参上的，即必须要在方法调用上使用
        let arr = [1,2,3]
        // let arrSpread = ...arr // 这里不可以直接赋值，spread参数必须以实参传递给方法调用

        // spread参数作为实参传递给方法
        let fun6 = (a,b,c,d) => {console.log(a,b,c,d)}
        fun6(...arr)

        // spread参数应用场景1：合并数组
        let arr1 = [1,2,3]
        let arr2 = [4,5,6]
        let arr3 = [...arr1, ...arr2]
        console.log(arr3)

        // spread参数应用场景2：合并对象属性
        let p1 = {name: "zhangsan"}
        let p2 = {age: 33}
        let p3 = {gender: "男"}
        let person = {...p1, ...p2, ...p3}
        console.log(person)

        let arr4 = new Array(1, 2, 3)
        let arr5 = [...arr4]
        let arr6 = new Array(...arr4)
        console.log(arr5)
        console.log(arr6)
    </script>
</head>
<body>
    
</body>
</html>